<template>
	<view>
		<view class="new_head_bg" style="fixed">
			<view class="title_layout">
				<view class="title_layout-2">
					<view class="layout-personal-info">
						<image v-if="headShowReturn==false" class="return-icon"
							src="@appstatic/img/my/my_personal_return_black.png" @click="$emit('goBack')"></image>

						<!-- 六期认证功能 -->
						<block>
							<image class="authentication_1"
								v-if="headShowReturn==false&&userInfo.officialTalentName!=undefined&&userInfo.officialTalentName!=null&&userInfo.officialTalentName!=''"
								src="https://dnsverify.pfmoto.com/appstatic/img/my/my_authentication_1.png">
						</block>

						<view class='text-1' v-if="userInfo.wechatName==''||userInfo.wechatName==null">
							<view v-if="userInfo.phone==null||userInfo.phone==undefined">
								已注销用户
							</view>
							<view v-else>
								{{userInfo.phone.substr(0, 3) + '*****' + userInfo.phone.substr(8)}}
							</view>
						</view>
						<view class='text-1 maxWidth' v-else>{{userInfo.wechatName}}</view>
						<!-- <image v-show="false" class="authentication_1" src="@appstatic/img/my/my_authentication_1.png">
								<view v-show="false" v-if="headShowReturn==false" class="text-3">认证用户</view>
								<view v-show="false" v-else class="text-2">认证用户</view> -->


						<!-- 六期认证功能 -->
						<block v-if="headShowReturn==true&&userInfo.officialTalentName!=undefined&&userInfo.officialTalentName!=null&&userInfo.officialTalentName!=''">
							<image class="authentication_1"
								src="https://dnsverify.pfmoto.com/appstatic/img/my/my_authentication_1.png"></image>
							<view class="text-2">认证用户</view>
							<!-- <block v-if="headShowReturn==false">
										<image class="badge_image1" src="@appstatic/my/badge_1.png"
											@click.stop="toMyBadge" />
										<image class="expertCertification_image1" @click.stop="toExpertCertification"
											src="@appstatic/my/expert_chuangzuo_2.png" v-if="'创作达人'=='创作达人'"> </image>
										<image class="expertCertification_image1" src="@appstatic/my/expert_daihuo_2.png"
											v-else-if="'带货达人1'=='带货达人'"> </image>
										<image class="expertCertification_image1" src="@appstatic/my/expert_zhishi_2.png"
											v-else-if="'知识达人1'=='知识达人'"> </image>
										<image class="expertCertification_image1" src="@appstatic/my/expert_gongchuang_2.png"
											v-else-if="'共创达人1'=='共创达人'"> </image>
										<image class="expertCertification_image1" src="@appstatic/my/expert_qixing_2.png"
											v-else-if="'骑行达人1'=='骑行达人'"> </image>
									</block> -->
						</block>


					</view>

					<image v-if="headShowReturn==false" class="edit-icon"
						src="@appstatic/img/my/my_personal_edit_black.png" @click="$emit('myEdit')">
				</view>

				<view class="content_layout" v-if="headShowReturn==true" id="content_layout">

					<view class="modal_layout" @click.stop="$emit('gotoFollowing')">
						<view class="text-4">{{myFocusCount}}</view>
						<view class="text-5">关注</view>
					</view>
					<view class="text-5">/</view>
					<view class="modal_layout" @click.stop="$emit('gotoFollower')">
						<view class="text-4">{{focusMeCount}}</view>
						<view class="text-5">粉丝</view>
					</view>
					<view class="text-5">/</view>
					<view class="modal_layout">
						<view class="text-4">{{thumbsNum}}</view>
						<view class="text-5">点赞</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "sticky",
		props: {
			headShowReturn: {
				type: Boolean,
				default: true
			},
			focusMeCount: {
				type: String,
				value: '',
				default: "0"
			},
			myFocusCount: {
				type: String,
				value: '',
				default: "0"
			},
			thumbsNum: {
				type: String,
				value: '',
				default: "0"
			},
			userInfo: {
				type: Object,
				default: null
			}
		},
		data() {
			return {

			};
		},

		methods: {

		}


	}
</script>

<style>
	.new_head_bg {
		width: 100%;
		background-color: #FFFFFF;
		margin-top: -30px;

		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		height: 100px;

	}

	.title_layout {
		background-color: #00000000;
		display: flex;
		flex-direction: column;
	}

	.return-icon {
		width: 24px;
		height: 24px;
	}

	.edit-icon {
		width: 24px;
		height: 24px;
		left: calc(100% - 130px);
		position: absolute;
	}

	.layout-personal-info {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.title_layout-2 {
		height: 112rpx;
		display: flex;
		flex-direction: row;
		justify-content: start;
		align-items: center;
		margin-left: 8px;
		margin-right: 8px;
		margin-top: 35px;
		margin-bottom: 10px;
	}



	.content_layout {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 16px;
		margin-right: 16px;
		margin-top: -20px;
		/* margin-top: -20px; */
	}

	.modal_layout {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.authentication_1 {
		width: 16px;
		height: 16px;
	}



	.text-1 {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 16px;
		line-height: 22px;
		display: flex;
		align-items: center;
		color: #3D3A3A;
		flex: none;
		order: 0;
		flex-grow: 0;
		margin: 0px 10px;
	}


	.text-2 {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 10px;
		line-height: 14px;
		display: flex;
		align-items: center;
		color: #ADB0AE;
		flex: none;
		order: 1;
		flex-grow: 0;
		margin: 0px 2px;
	}

	.text-3 {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 10px;
		line-height: 14px;
		display: flex;
		align-items: center;
		color: #EA5404;
		flex: none;
		order: 1;
		flex-grow: 0;
		margin: 0px 2px;
	}

	.text-4 {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 14px;
		line-height: 20px;
		display: flex;
		align-items: center;
		color: #3D3A3A;
		flex: none;
		margin: 0px 4px;
	}

	.text-5 {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 17px;
		display: flex;
		align-items: center;
		color: #ADB0AE;
		flex: none;
		margin: 0px 4px;
	}

	.authentication_1 {
		width: 16px;
		height: 16px;
	}

	.badge_image1 {
		width: 72rpx;
		height: 72rpx;
	}

	.expertCertification_image1 {
		width: 140rpx;
		height: 40rpx;
	}
</style>
